<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>

	<body>
		<style>
			.layer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		</style>
		<!-- fill -->
		<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none">
			<!-- 容器 -->
			<rect x="0" y="0" width="1080" height="1920" fill="rgba(96,96,96,.08)" />
			<!-- 元素 -->
		</svg>
		<!-- contain 居中 -->
		<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet">
			<!-- 容器 -->
			<rect x="0" y="233" width="1080" height="1407" fill="#1565C0" />
			<!-- 元素 -->
		</svg>
		<!-- contain 居底 -->
		<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet">
			<!-- 容器 -->
			<rect x="444" y="1779" width="191" height="39" fill="#1565CF" />
			<!-- 元素 -->
		</svg>
	</body>

</html>